<style lang="scss" scoped>
.chem-variation-page{
    background: #fff;
    padding:10px;
    margin:auto;
    .content-title{
        font-weight:normal;
    }
}
</style>
<template>
    <div class="chem-variation-page content-mask" v-loading="loading">
        <el-card class="card-content header-content">
            <h2 class="content-title">变异：<span>{{rs}}</span></h2>
            <div class="block">
                <el-table :data="chemVariationArray" border>
                    <el-table-column align="center"  label="变异名称" prop="variant"></el-table-column>
                    <el-table-column align="center"  label="基因名称" prop="entrezSymbol"></el-table-column>
                    <el-table-column align="center"  label="染色体" prop="chromosome"></el-table-column>
                    <el-table-column align="center"  label="等位基因" prop="alleles"></el-table-column>
                    <el-table-column align="center"  label="表型分类" prop="phenotypecategory"></el-table-column>
                    <el-table-column align="center"  label="相关药物" prop="drugName"></el-table-column>
                    <!-- <el-table-column align="center"  label="相关药物">
                        <template slot-scope="scope">
                            <a @click="goDrug(scope.row.drugId)" href="javascript:;">{{scope.row.drugName}}</a>
                        </template>
                    </el-table-column> -->
                    <el-table-column align="center" label="临床意义">
                        <template slot-scope="scope">
                            <el-popover v-if="scope.row.notes" placement="top" width="300">
                                <p>{{ scope.row.notes }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag style="cursor:pointer;" size="medium">查看</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="等位基因解读">
                        <template slot-scope="scope">
                            <el-popover v-if="scope.row.sentence"  placement="top" width="300">
                                <p>{{ scope.row.sentence }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag style="cursor:pointer;"  size="medium">查看</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="PMID" prop="pmid"></el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
import {medicine} from 'api/index.js';
export default {
    name: 'chemVariationPage',
    data(){
        return{
            rs:"",
            loading:false,
            chemVariationArray:[],
        }
    },
    methods:{
        getChemVariation(){
            var obj={
                rs:this.rs
            }
            this.loading = true;
            medicine.getpharmEvidentByRs(obj).then((data)=>{
                if(data.status == 200){
                    if(data.data){
                        this.chemVariationArray = data.data;
                    }else{
                        this.$message.error(data.msg);
                    }
                }else{
                    this.$message.error(data.msg);
                }
                this.loading = false;
            }).catch(error => {
                this.$message.error("获取化疗变异位点详情失败");
                this.loading = false;
            });
        },
        goDrug(id){
            this.$router.push("/drug?id="+id+"");
        }
    },
    mounted() {
        this.rs = M.url().chemId ? M.url().chemId : '';
        this.getChemVariation();
    },
}
</script>


